<template>
  <div>
    <Card>
      <Form :label-width="100" :model="queryParams" :rules="ruleValidate" inline>
            <FormItem label="登陆账户" prop="account">
              <Input v-model="queryParams.account" style="width: 200px" />
            </FormItem>
            <FormItem label="登陆状态" prop="status">
              <Select v-model="queryParams.status" style="width: 200px" :clearable="true">
                <Option v-for="item in statusOptions" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </FormItem>
            <FormItem label="登陆时间">
              <DatePicker :value="queryParams.createTime" type="date" format="yyyy-MM-dd" placeholder="请选择日期" style="width: 200px"
                          :clearable="true" :editable="false" @on-change="queryParams.createTime=$event"></DatePicker>
            </FormItem>
            <FormItem>
              <Button type="primary" icon="ios-search" @click="search">查询</Button>
            </FormItem>
      </Form>

      <Row style="padding: 10px 10px 10px 0">
          <Button type="warning" icon="md-close" @click="delLog" class="button1">删除</Button>
          <Button type="warning" icon="ios-trash" @click="emptyLog" class="button1">清空</Button>
      </Row>

      <Table border :columns="columns1" :data="logList" :loading="loading" @on-selection-change="onSelectChange"></Table>

      <Page show-sizer show-total show-elevator :total="total" :current="queryParams.pageNum" :page-size="queryParams.pageSize"
            @on-page-size-change="onPageSizeChange" @on-change="onPageChange" style="margin-top: 15px; text-align:right"/>
    </Card>
  </div>
</template>

<script>
  import {list} from '@/api/monitor/loginlog'
  import { delOneLog, batchDelete, emptyLog } from '@/api/monitor/loginlog'
  export default {
    name: "loginlog-index",
    data() {
      let re = /^[^`!@#$%^&*.<>]+$/;
      const validateInt = (rule, value, callback) => {
        if ((!re.test(value) && value)) {
          callback(new Error('不能输入特殊字符'));
        } else {
          callback();
        }
      };
      return {
        columns1: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '登录IP',
            key: 'ip'
          },
          {
            title: '登录账户',
            key: 'account'
          },
          {
            title: '登录描述',
            key: 'descript'
          },
          {
            title: '登陆状态',
            key: 'status',
            align: 'center',
            render: (h, params)=> {
              if (params.row.status === '1') {
                return h('div', [
                  h(
                    "Tag",
                    {
                      props: {
                        color: "warning"
                      }
                    },
                    "失败"
                  )
                ]);
              } else if (params.row.status === '0') {
                return h('div', [
                  h(
                    "Tag",
                    {
                      props: {
                        color: "success"
                      }
                    },
                    "成功"
                  )
                ]);
              }
            }
          },
          {
            title: '登录时间',
            key: 'createTime'
          },
          {
            title: '登录位置',
            key: 'location'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            minWidth: 50,
            render: (h, params)=> {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.delOneLog(params.row.logId);
                    }
                  }
                }, '删除'),
              ]);
            }
          },
        ],
        // 遮罩层
        loading: true,
        // 表格数据
        logList: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          account: "",
          createTime: "",
          status: ""
        },
        statusOptions: [],
        ruleValidate: {
          account: [
            {validator: validateInt, trigger: 'blur'}
          ]
        },
        selections: [],
      }
    },
    computed: {
    },
    created() {
      this.getDictList("login_status").then(res => {
        this.statusOptions = res.data.data;
      });
    },
    mounted() {
      this.getLogList();
    },
    methods: {
      onPageChange: function (currentPageIndex) {
        this.queryParams.pageNum = currentPageIndex;
        this.getLogList();
      },
      onPageSizeChange: function (currentLimitNumber) {
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = currentLimitNumber;
        this.getLogList();
      },
      onSelectChange(selection) {
        console.log(selection);
        this.selections = selection;
      },
      search() {
        this.queryParams.pageNum = 1;
        this.getLogList();
      },
      delLog() {
        if (this.selections.length === 0) {
          this.$Message.error("请选择需要删除的日志信息！");
          return;
        }
        this.$Modal.confirm({
          title: '提示',
          content: '是否批量删除' + this.selections.length + '条登陆日志？',
          onOk: () => {
            let logIdArray = [];
            for (let item of this.selections) {
              logIdArray.push(item.logId);
            }
            batchDelete({logIds: logIdArray.join()}).then(res => {
              if (res.data.code === 0) {
                this.$Message.success(res.data.message);
                this.getLogList();
              }
            })
          }
        });
      },
      delOneLog(logId) {
        console.log("删除：" + logId);
        this.$Modal.confirm({
          title: '提示',
          content: '是否删除条登陆日志 ' + logId + ' ?',
          onOk: () => {
            delOneLog({logId: logId}).then(res => {
              if (res.data.code === 0) {
                this.$Message.success(res.data.message);
                this.getLogList();
              }
            });
          }
        });
      },
      emptyLog() {
        this.$Modal.confirm({
          title: '提示',
          content: '是否清空全部登陆日志？',
          onOk: () => {
            emptyLog().then(res => {
              if (res.data.code === 0) {
                this.$Message.success(res.data.message);
                this.getLogList();
              }
            });
          }
        });
      },
      // 查询登录日志
      getLogList() {
        this.loading = true;

        let searchParams = Object.assign({}, this.queryParams);
        console.log(searchParams);

        list(searchParams).then(res => {
          this.logList = res.data.data.rows;
          this.total = res.data.data.total;
          this.loading = false;
        }).catch(error => {
          this.$Message.error(error.data.message);
          this.loading = false;
        });
      },

    }
  }
</script>

<style scoped>
  .button1 {
    margin-right: 10px;
  }

</style>
